import React, { useState, useEffect, useCallback } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { videoAPI, followAPI } from '../services/api';
import { Video, Comment } from '../types';
import Avatar from '../components/Avatar';
import { useAuth } from '../contexts/AuthContext';

interface Reply {
  id: number;
  username: string;
  content: string;
  createdAt: string;
  likes: number;
}

const VideoDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { user } = useAuth();
  const [video, setVideo] = useState<Video | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [isLiked, setIsLiked] = useState(false);
  const [isFollowing, setIsFollowing] = useState(false);
  const [comments, setComments] = useState<Comment[]>([]);
  const [commentCount, setCommentCount] = useState(0);
  const [showCommentModal, setShowCommentModal] = useState(false);
  const [commentContent, setCommentContent] = useState('');
  const [isPlaying, setIsPlaying] = useState(false);
  const [showReplyModal, setShowReplyModal] = useState(false);
  const [selectedComment, setSelectedComment] = useState<Comment | null>(null);
  const [replyContent, setReplyContent] = useState('');
  const [replies, setReplies] = useState<Reply[]>([]);

  // 调试信息
  useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      console.log('showCommentModal:', showCommentModal);
    }
  }, [showCommentModal]);

  // 模拟回复数据 - 为每个评论创建独立的回复
  const getMockRepliesForComment = (commentId: number): Reply[] => {
    const replyTemplates = [
      {
        username: "adsfasdf",
        content: "dsafsdafdsf",
        likes: 29000
      },
      {
        username: "admin", 
        content: "第三方",
        likes: 29000
      },
      {
        username: "user123",
        content: "负担感", 
        likes: 29000
      },
      {
        username: "commenter456",
        content: "是的噶",
        likes: 29000
      }
    ];

    // 根据评论ID生成不同的回复组合
    const replies: Reply[] = [];
    const startIndex = commentId % replyTemplates.length;
    
    for (let i = 0; i < 4; i++) {
      const templateIndex = (startIndex + i) % replyTemplates.length;
      const template = replyTemplates[templateIndex];
      replies.push({
        id: commentId * 100 + i + 1,
        username: template.username,
        content: template.content,
        createdAt: "2024-03-21T10:30:00Z",
        likes: template.likes
      });
    }
    
    return replies;
  };

  const fetchVideo = useCallback(async () => {
    try {
      setLoading(true);
      const videoData = await videoAPI.getVideo(parseInt(id!));
      setVideo(videoData);
      
      if (user) {
        try {
          const liked = await videoAPI.checkLikeStatus(videoData.id, user.id);
          setIsLiked(liked);
          
          if (videoData.userId && videoData.userId !== user.id) {
            const following = await followAPI.checkFollowStatus(user.id, videoData.userId);
            setIsFollowing(following);
          }
        } catch (error) {
          console.error('检查状态失败:', error);
        }
      }
      
      try {
        const result = await videoAPI.getComments(videoData.id);
        setComments(result.comments);
        setCommentCount(result.count);
      } catch (error) {
        console.error('获取评论失败:', error);
      }
    } catch (error: any) {
      setError(error.message || '获取视频失败');
    } finally {
      setLoading(false);
    }
  }, [id, user]);

  useEffect(() => {
    if (id) {
      fetchVideo();
    }
    
    // 清理函数
    return () => {
      setShowCommentModal(false);
      setShowReplyModal(false);
      setCommentContent('');
      setReplyContent('');
    };
  }, [id, fetchVideo]);

  // 确保模态框状态正确
  useEffect(() => {
    // 强制重置模态框状态
    setShowCommentModal(false);
    setShowReplyModal(false);
  }, []);

  const handleLike = async () => {
    if (!video || !user) {
      alert('请先登录');
      navigate('/login');
      return;
    }

    try {
      const result = await videoAPI.toggleLike(video.id, user.id);
      setIsLiked(result.isLiked);
      if (result.video) {
        setVideo(prev => prev ? { ...prev, likes: result.video.likes } : null);
      }
    } catch (error: any) {
      console.error('点赞失败:', error);
      alert(error.message || '点赞失败');
    }
  };

  const handleComment = async () => {
    if (!user) {
      alert('请先登录');
      navigate('/login');
      return;
    }
    console.log('点击评论按钮，显示评论模态框');
    setShowCommentModal(true);
  };

  const handleAddComment = async () => {
    if (!user || !commentContent.trim() || !video) {
      alert('请输入评论内容');
      return;
    }

    try {
      const newComment = await videoAPI.addComment(video.id, user.id, commentContent);
      setComments(prev => [newComment, ...prev]);
      setCommentCount(prev => prev + 1);
      setCommentContent('');
    } catch (error: any) {
      console.error('评论失败:', error);
      alert(error.message || '评论失败');
    }
  };

  const handleFollow = async () => {
    if (!user || !video) {
      alert('请先登录');
      navigate('/login');
      return;
    }

    if (!video.userId) {
      alert('无法获取用户信息');
      return;
    }

    if (video.userId === user.id) {
      alert('不能关注自己');
      return;
    }

    try {
      if (isFollowing) {
        await followAPI.unfollowUser(user.id, video.userId);
        setIsFollowing(false);
        alert('已取消关注');
      } else {
        await followAPI.followUser(user.id, video.userId);
        setIsFollowing(true);
        alert('关注成功');
      }
    } catch (error: any) {
      console.error('关注操作失败:', error);
      alert(error.message || '操作失败');
    }
  };

  const handleShare = () => {
    const videoLink = `${window.location.origin}/video/${video?.id}`;
    navigator.clipboard.writeText(videoLink).then(() => {
      alert('链接已复制到剪贴板');
    }).catch(() => {
      alert('复制失败，请手动复制链接');
    });
  };

  const handleVideoClick = () => {
    setIsPlaying(!isPlaying);
  };

  const handleReply = (comment: Comment) => {
    if (!user) {
      alert('请先登录');
      navigate('/login');
      return;
    }
    setSelectedComment(comment);
    setReplies(getMockRepliesForComment(comment.id));
    setShowReplyModal(true);
  };

  const handleAddReply = async () => {
    if (!user || !replyContent.trim() || !selectedComment) {
      alert('请输入回复内容');
      return;
    }

    try {
      // 模拟添加回复
      const newReply: Reply = {
        id: Date.now(),
        username: user.username,
        content: replyContent,
        createdAt: new Date().toISOString(),
        likes: 0
      };
      
      // 只添加到当前评论的回复列表
      setReplies(prev => [newReply, ...prev]);
      setReplyContent('');
      alert('回复成功');
    } catch (error: any) {
      console.error('回复失败:', error);
      alert(error.message || '回复失败');
    }
  };

  const formatNumber = (num: number) => {
    if (num >= 10000) {
      return (num / 10000).toFixed(1) + '万';
    }
    return num.toString();
  };

  if (loading) {
    return (
      <div className="h-screen bg-black flex items-center justify-center">
        <div className="text-white text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4"></div>
          <p>加载中...</p>
        </div>
      </div>
    );
  }

  if (error || !video) {
    return (
      <div className="h-screen bg-black flex items-center justify-center">
        <div className="text-white text-center">
          <p className="text-red-400 mb-4">{error || '视频不存在'}</p>
          <button 
            onClick={() => navigate('/')}
            className="bg-white text-black px-4 py-2 rounded"
          >
            返回首页
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="h-screen bg-black relative overflow-hidden">
      {/* 顶部状态栏 */}
      <div className="absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-2 text-white text-sm">
        <div className="flex items-center space-x-2">
          <button onClick={() => navigate(-1)} className="text-white">
            <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
            </svg>
          </button>
          <span>发现</span>
        </div>
        <div className="flex items-center space-x-4">
          <button className="text-white">
            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
            </svg>
          </button>
          <button className="text-white">
            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
            </svg>
          </button>
          <span className="text-xs">HDR</span>
        </div>
      </div>

      {/* 视频播放区域 */}
      <div className="relative w-full h-full pb-24">
        <video 
          className="w-full h-full object-cover"
          poster={video.thumbnail}
          src={video.videoUrl}
          loop
          muted
          playsInline
          onClick={handleVideoClick}
          autoPlay={isPlaying}
        />
        
        {/* 播放/暂停按钮 */}
        {!isPlaying && (
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="w-20 h-20 bg-black bg-opacity-50 rounded-full flex items-center justify-center">
              <svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M8 5v14l11-7z"/>
              </svg>
            </div>
          </div>
        )}

        {/* 视频内容覆盖文字 */}
        <div className="absolute bottom-20 left-4 text-white">
          <div className="bg-yellow-500 text-black text-xs px-2 py-1 rounded mb-2">
            {video.title}
          </div>
        </div>
      </div>

      {/* 底部信息区域 */}
      <div className="absolute bottom-0 left-0 right-0 p-4 text-white z-50">
        {/* 用户信息 */}
        <div className="flex items-center space-x-3 mb-2">
          <span className="text-sm font-medium">{video.username}</span>
          <span className="text-xs text-gray-300">@{video.username}</span>
        </div>
        
        {/* 视频标签 */}
        <div className="flex flex-wrap gap-2 mb-2">
          <span className="text-xs bg-gray-800 px-2 py-1 rounded">#搞笑</span>
          <span className="text-xs bg-gray-800 px-2 py-1 rounded">#猫咪</span>
          <span className="text-xs bg-gray-800 px-2 py-1 rounded">#日常</span>
        </div>
        
        {/* 相关搜索 */}
        <div className="text-xs text-gray-300">
          相关搜索: 钢琴10级高燃现场
        </div>
      </div>

      {/* 右侧交互栏 */}
      <div className="absolute right-4 bottom-32 flex flex-col items-center space-y-6 z-10">
        {/* 用户头像 */}
        <div className="relative">
          <Avatar 
            user={{
              id: video.userId || 0,
              username: video.username || '未知用户',
              email: '',
              avatar: undefined,
              bio: '',
              createdAt: video.createdAt,
              updatedAt: video.createdAt
            }} 
            size="lg" 
          />
          <button
            onClick={handleFollow}
            className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center"
          >
            <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
            </svg>
          </button>
        </div>

        {/* 点赞 */}
        <button
          onClick={handleLike}
          className="flex flex-col items-center space-y-1"
        >
          <div className="w-12 h-12 bg-black bg-opacity-30 rounded-full flex items-center justify-center">
            <span className="text-2xl">{isLiked ? '❤️' : '🤍'}</span>
          </div>
          <span className="text-white text-sm">{video?.likes || 0}</span>
        </button>

        {/* 评论 */}
        <button
          onClick={handleComment}
          className="flex flex-col items-center space-y-1"
        >
          <div className="w-12 h-12 bg-black bg-opacity-30 rounded-full flex items-center justify-center">
            <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path d="M21.99 4c0-1.1-.89-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18zM18 14H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
            </svg>
          </div>
          <span className="text-white text-sm">{commentCount}</span>
        </button>

        {/* 收藏 */}
        <button className="flex flex-col items-center space-y-1">
          <div className="w-12 h-12 bg-black bg-opacity-30 rounded-full flex items-center justify-center">
            <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
            </svg>
          </div>
          <span className="text-white text-sm">99</span>
        </button>

        {/* 分享 */}
        <button
          onClick={handleShare}
          className="flex flex-col items-center space-y-1"
        >
          <div className="w-12 h-12 bg-black bg-opacity-30 rounded-full flex items-center justify-center">
            <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
            </svg>
          </div>
          <span className="text-white text-sm">168</span>
        </button>
      </div>

      {/* 评论模态框 */}
      {showCommentModal && (
        <div 
          className="fixed inset-0 bg-white z-[9999]"
          style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }}
        >
          {process.env.NODE_ENV === 'development' && (
            <div className="absolute top-0 right-0 z-[10000] bg-red-500 text-white p-2">
              <button onClick={() => setShowCommentModal(false)}>
                强制关闭模态框
              </button>
            </div>
          )}
          <div className="flex flex-col h-full">
            {/* 顶部视频区域 */}
            <div className="relative h-1/3 bg-black">
              <video 
                className="w-full h-full object-cover"
                poster={video.thumbnail}
                src={video.videoUrl}
                loop
                muted
                playsInline
                autoPlay
              />
              <div className="absolute top-0 left-0 right-0 flex items-center justify-between px-4 py-2 text-white text-sm">
                <div className="flex items-center space-x-2">
                  <button onClick={() => setShowCommentModal(false)} className="text-white">
                    <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                    </svg>
                  </button>
                </div>
                <div className="flex items-center space-x-4">
                  <button className="text-white">
                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                    </svg>
                  </button>
                </div>
              </div>
              <div className="absolute bottom-4 left-4 text-white">
                <div className="bg-yellow-500 text-black text-xs px-2 py-1 rounded">
                  {video.title}
                </div>
              </div>
            </div>

            {/* 相关搜索栏 */}
            <div className="bg-gray-100 px-4 py-3 flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <span className="text-sm text-gray-600">相关搜索: 钢琴10级高燃现场</span>
                <span className="text-sm text-gray-400">Q</span>
              </div>
              <div className="flex items-center space-x-2">
                <button className="text-gray-500">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>
                  </svg>
                </button>
                <button 
                  onClick={() => setShowCommentModal(false)}
                  className="text-gray-500 text-xl"
                >
                  ✕
                </button>
              </div>
            </div>

            {/* 评论数量 */}
            <div className="px-4 py-2 border-b border-gray-200">
              <h2 className="text-center text-lg font-medium">{commentCount}条评论</h2>
            </div>

            {/* 评论列表 */}
            <div className="flex-1 overflow-y-auto bg-white">
              {comments.length === 0 ? (
                <div className="text-center py-8">
                  <p className="text-gray-400 text-lg">暂无评论，快来发表第一条评论吧！</p>
                </div>
              ) : (
                <div className="space-y-4 p-4">
                  {comments.map(comment => (
                    <div key={comment.id} className="flex items-start space-x-3">
                      {/* 用户头像 */}
                      <div className="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center flex-shrink-0">
                        <span className="text-white text-sm font-medium">{comment.username.charAt(0)}</span>
                      </div>
                      
                      {/* 评论内容 */}
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center space-x-2 mb-1">
                          <span className="text-sm font-medium text-gray-900">{comment.username}</span>
                        </div>
                        <p className="text-sm text-gray-800 mb-2">{comment.content}</p>
                        
                        {/* 评论媒体（如果有） */}
                        {comment.id % 3 === 0 && (
                          <div className="mb-2">
                            <div className="w-32 h-24 bg-gray-200 rounded-lg flex items-center justify-center">
                              <span className="text-xs text-gray-500">图片</span>
                            </div>
                          </div>
                        )}
                        
                        {/* 评论元数据 */}
                        <div className="flex items-center justify-between text-xs text-gray-500">
                          <div className="flex items-center space-x-2">
                            <span>03-21 江西</span>
                            <button 
                              className="text-blue-500"
                              onClick={() => handleReply(comment)}
                            >
                              回复
                            </button>
                          </div>
                          <div className="flex items-center space-x-1">
                            <span>{formatNumber(29000 + comment.id * 100)}</span>
                            <button className="text-red-500">❤️</button>
                          </div>
                        </div>
                        
                        {/* 展开回复 */}
                        {comment.id % 2 === 0 && (
                          <div className="mt-2">
                            <button 
                              className="text-blue-500 text-xs flex items-center space-x-1"
                              onClick={() => handleReply(comment)}
                            >
                              <span>展开{278 + comment.id}条回复</span>
                              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M7 10l5 5 5-5z"/>
                              </svg>
                            </button>
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* 评论输入区域 */}
            <div className="border-t border-gray-200 bg-white">
              {/* 输入框 */}
              <div className="px-4 py-3">
                <div className="flex items-center space-x-2 bg-gray-100 rounded-full px-4 py-2">
                  <input
                    type="text"
                    value={commentContent}
                    onChange={(e) => setCommentContent(e.target.value)}
                    placeholder="发条有爱评论~"
                    className="flex-1 bg-transparent text-sm focus:outline-none"
                    onKeyDown={(e) => {
                      if (e.key === 'Enter' && commentContent.trim()) {
                        handleAddComment();
                      }
                    }}
                  />
                  <div className="flex items-center space-x-2">
                    <button className="text-gray-500 text-sm">@</button>
                    <button className="text-gray-500 text-sm relative">
                      📷
                      <div className="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></div>
                    </button>
                    <button className="text-gray-500 text-sm">😊</button>
                    <button
                      onClick={handleAddComment}
                      className="bg-red-500 text-white px-4 py-1 rounded-full text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                      disabled={!commentContent.trim()}
                    >
                      发送
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 回复模态框 */}
      {showReplyModal && selectedComment && (
        <div 
          className="fixed inset-0 bg-white z-[9999]"
          style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }}
        >
          <div className="flex flex-col h-full">
            {/* 顶部标题栏 */}
            <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
              <button 
                onClick={() => setShowReplyModal(false)}
                className="text-gray-500"
              >
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                </svg>
              </button>
              <h2 className="text-lg font-medium">回复</h2>
              <div className="w-6"></div>
            </div>

            {/* 原评论 */}
            <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
              <div className="flex items-start space-x-3">
                <div className="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center flex-shrink-0">
                  <span className="text-white text-xs font-medium">{selectedComment.username.charAt(0)}</span>
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center space-x-2 mb-1">
                    <span className="text-sm font-medium text-gray-900">{selectedComment.username}</span>
                  </div>
                  <p className="text-sm text-gray-800">{selectedComment.content}</p>
                </div>
              </div>
            </div>

            {/* 回复列表 */}
            <div className="flex-1 overflow-y-auto bg-white">
              <div className="space-y-4 p-4">
                {replies.map(reply => (
                  <div key={reply.id} className="flex items-start space-x-3">
                    {/* 用户头像 */}
                    <div className="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center flex-shrink-0">
                      <span className="text-white text-xs font-medium">{reply.username.charAt(0)}</span>
                    </div>
                    
                    {/* 回复内容 */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center space-x-2 mb-1">
                        <span className="text-sm font-medium text-gray-900">{reply.username}</span>
                      </div>
                      <p className="text-sm text-gray-800 mb-2">{reply.content}</p>
                      
                      {/* 回复元数据 */}
                      <div className="flex items-center justify-between text-xs text-gray-500">
                        <div className="flex items-center space-x-2">
                          <span>03-21 江西</span>
                        </div>
                        <div className="flex items-center space-x-1">
                          <span>{formatNumber(reply.likes)}</span>
                          <button className="text-red-500">❤️</button>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* 回复输入区域 */}
            <div className="border-t border-gray-200 bg-white">
              <div className="px-4 py-3">
                <div className="flex items-center space-x-2 bg-gray-100 rounded-full px-4 py-2">
                  <input
                    type="text"
                    value={replyContent}
                    onChange={(e) => setReplyContent(e.target.value)}
                    placeholder="回复评论..."
                    className="flex-1 bg-transparent text-sm focus:outline-none"
                    onKeyDown={(e) => {
                      if (e.key === 'Enter' && replyContent.trim()) {
                        handleAddReply();
                      }
                    }}
                  />
                  <div className="flex items-center space-x-2">
                    <button className="text-gray-500 text-sm">@</button>
                    <button className="text-gray-500 text-sm">😊</button>
                    <button
                      onClick={handleAddReply}
                      className="bg-red-500 text-white px-4 py-1 rounded-full text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                      disabled={!replyContent.trim()}
                    >
                      发送
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default VideoDetail;